<template>
  <v-navigation-drawer v-model="modelValue" app>
    <v-list>
      <v-list-item prepend-icon="mdi-view-dashboard" title="Dashboard" value="dashboard" to="/" />

      <v-list-group value="data">
        <template v-slot:activator="{ props }">
          <v-list-item v-bind="props" prepend-icon="mdi-database" title="数据管理" />
        </template>

        <v-list-item prepend-icon="mdi-text-box" title="文本数据" value="texts" to="/texts" />

        <v-list-item prepend-icon="mdi-image" title="图片数据" value="images" to="/images" />
      </v-list-group>

      <v-list-item prepend-icon="mdi-clipboard-text" title="爬虫日志" value="logs" to="/logs" />

      <v-list-item prepend-icon="mdi-cog" title="设置" value="settings" to="/settings" />
    </v-list>
  </v-navigation-drawer>
</template>

<script setup lang="ts">
import { computed } from 'vue';

const props = defineProps<{
  modelValue: boolean
}>()

const emit = defineEmits(['update:modelValue'])

const modelValue = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  }
})
</script>